{{ define "admin/login/index.html" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>后台管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/static/admin/images/favicon.ico" rel="icon">
    <link href="/static/admin/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/static/admin/element/index.css">
    <link rel="stylesheet" href="/static/admin/css/base.css">
    <script src="/static/admin/element/vue.js"></script>
    <script src="/static/admin/element/index.js"></script>
    <script src="/static/admin/js/axios.min.js"></script>
    <script src="/static/admin/js/js.cookie.min.js"></script>
    <script src="/static/admin/js/common.js"></script>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<div id="app" class="body-bg">
    <div class="login-main">
        <h2 class="site-title">{{ "{{site_title}}" }}</h2>
        <el-form ref="login" :model="login" size="medium" :rules="loginRules" class="login-form" label-position="left" >
            <el-form-item style="margin-bottom:18px;" prop="username">
                <el-input v-model="login.username"  type="text" placeholder="用户名" prefix-icon="el-icon-user" autocomplete="off" clearable />
            </el-form-item>
            <el-form-item style="margin-bottom:18px;" prop="password">
                <el-input v-model="login.password"  type="text" placeholder="密码" prefix-icon="el-icon-lock" @keyup.enter.native="handleLogin" autocomplete="off" clearable show-password/>
            </el-form-item>
            <el-form-item style="margin-bottom:18px;" prop="captcha" v-if="verify_status">
                <el-col :span="13">
                    <el-input v-model="login.captcha"  type="text" placeholder="验证码" prefix-icon="el-icon-picture" @keyup.enter.native="handleLogin" autocomplete="off" clearable/>
                </el-col>
                <el-col :span="11">
                    <el-image :src="verifySrc"  alt="验证码" title="点击刷新验证码" @click="refeshVerifySrc" style="width:108px;height:35px; margin-top:3px;float:right" />
                </el-col>
            </el-form-item>
        </el-form>
        <el-button :loading="loading" size="small"  type="primary" style="width:100%;" @click.native.prevent="handleLogin">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
        </el-button>
    </div>
</div>

<script>
    base_url = Vue.prototype.base_url;
    new Vue({
        el: '#app',
        data: function() {
            return {
                loading: false,
                login:{
                    username:'admin',
                    password:'123456',
                    captcha:'',
                    captcha_id:'',
                },
                loginRules: {
                    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                    captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
                },
                verifySrc:'',
                verify_status:true,
                success_url:'',
                site_title:'',
            }
        },

        mounted(){
            this.captch()
        },
        methods:{
            captch(){
                console.log(Vue.prototype.urlobj)
                axios(base_url + '/admin/login/verify').then(res => {
                    if(res.data.status == 200){
                        this.verifySrc = res.data.data.captcha.base64
                        this.login.captcha_id = res.data.data.captcha.key
                        this.success_url = res.data.data.success_url
                        this.site_title = res.data.data.site_title
                        // this.verify_status = res.data.verify_status
                    }else{
                        this.$message.error('验证码获取失败!')
                    }
                })
            },
            refeshVerifySrc() {
                this.captch()
            },
            handleLogin(){
                this.$refs['login'].validate(valid => {
                    if(valid){
                        this.loading = true
                        axios.post(base_url + '/admin/login/dologin',this.login).then(res => {
                            if(res.data.status == 200){
                                sessionStorage.setItem('nickname',res.data.data.nickname)
                                this.$message({
                                    message:'登录成功',
                                    type: 'success',
                                    duration:2000
                                })
                                setTimeout(function (){
                                    this.loading = false
                                    window.location.href = base_url + '/admin/index/index';
                                },2000)
                            }else{
                                this.loading = false
                                this.refeshVerifySrc()
                                this.$message.error(res.data.msg)
                            }
                        })
                    }
                })
            }
        },
    })
</script>
</html>
{{ end }}
